<script setup lang="tsx">
// 第三方组件导入（Element Plus UI组件）
import { ElButton, ElPopconfirm, ElTag } from 'element-plus';
// 业务常量及API接口
import { enableStatusRecord } from '@/constants/business';
import { fetchGetRoleList } from '@/service/api';
// 通用表格Hook
import { useTable, useTableOperate } from '@/hooks/common/table';
// 国际化工具
import { $t } from '@/locales';
// 子组件
import RoleOperateDrawer from './modules/role-operate-drawer.vue';
import RoleSearch from './modules/role-search.vue';
// import { log } from 'console';

/**
 * 表格核心逻辑
 * 使用useTable Hook初始化表格配置
 */
const {
  columns,        // 表格列配置
  columnChecks,   // 当前显示的列
  data,           // 表格数据源
  loading,        // 加载状态
  getData,        // 获取数据方法
  getDataByPage,  // 分页获取数据
  mobilePagination, // 移动端分页配置
  searchParams,     // 搜索参数
  resetSearchParams // 重置搜索
} = useTable({
  apiFn: fetchGetRoleList,  // 接口请求方法
  apiParams: {              // 默认请求参数
    current: 1,
    size: 10,
    status: undefined,
    roleName: undefined,
    roleCode: undefined
  },
  // 列配置（使用JSX语法）
  columns: () => [
    { type: 'selection', width: 48 }, // 选择列
    { prop: 'index', label: $t('common.index'), width: 64 }, // 序号列
    { prop: 'roleName', label: $t('page.manage.role.roleName'), minWidth: 120 },
    { prop: 'roleCode', label: $t('page.manage.role.roleCode'), minWidth: 120 },
    { prop: 'roleDesc', label: $t('page.manage.role.roleDesc'), minWidth: 120 },
    {
      prop: 'status',
      label: $t('page.manage.role.roleStatus'),
      width: 100,
      // 状态列格式化（使用Element Tag显示不同状态）
      formatter: row => {
        if (row.status === undefined) return '';
        // 状态类型映射
        const tagMap: Record<Api.Common.EnableStatus, UI.ThemeColor> = {
          1: 'success',
          2: 'warning'
        };
        const label = $t(enableStatusRecord[row.status]);
        return <ElTag type={tagMap[row.status]}>{label}</ElTag>;
      }
    },
    {
      prop: 'operate',
      label: $t('common.operate'),
      width: 130,
      // 操作列（编辑+删除）
      formatter: row => (
        <div class="flex-center">
          <ElButton type="primary" plain size="small" onClick={() => edit(row.id)}>
            {$t('common.edit')}
          </ElButton>
          <ElPopconfirm title={$t('common.confirmDelete')} onConfirm={() => handleDelete(row.id)}>
            {{
              reference: () => (
                <ElButton type="danger" plain size="small">
                  {$t('common.delete')}
                </ElButton>
              )
            }}
          </ElPopconfirm>
        </div>
      )
    }
  ]
});

/**
 * 表格操作逻辑
 * 使用useTableOperate Hook处理增删改操作
 */
const {
  drawerVisible,  // 抽屉可见性
  operateType,    // 操作类型（add/edit）
  editingData,    // 正在编辑的数据
  handleAdd,      // 新增操作
  handleEdit,     // 编辑操作
  checkedRowKeys, // 已选中的行keys
  onBatchDeleted, // 批量删除回调
  onDeleted       // 单个删除回调
} = useTableOperate(data, getData);

/** 处理批量删除 */
async function handleBatchDelete() {
  // 实际开发中此处应调用API
  console.log('待删除IDs:', checkedRowKeys.value);

  onBatchDeleted(); // 更新表格状态
}

/** 处理单个删除 */
async function handleDelete(id: number) {
  try {
  // 实际开发中此处应调用API
  console.log('删除ID:', id);
  await fetchGetRoleRemove(id);
  window.$message?.success($t('common.deleteSuccess'));
  onDeleted(); // 更新表格状态
} catch (error) {
     console.error('提交失败:', error);
     // FIXME: 需要添加更详细的错误处理逻辑
   }
}

/** 编辑指定条目 */
function edit(id: number) {
  handleEdit(id); // 调用通用编辑方法
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <RoleSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
    <ElCard class="sm:flex-1-hidden card-wrapper" body-class="ht50">
      <template #header>
        <div class="flex items-center justify-between">
          <p>{{ $t('page.manage.role.title') }}</p>
          <TableHeaderOperation
            v-model:columns="columnChecks"
            :disabled-delete="checkedRowKeys.length === 0"
            :loading="loading"
            @add="handleAdd"
            @delete="handleBatchDelete"
            @refresh="getData"
          />
        </div>
      </template>
      <div class="h-[calc(100%-50px)]">
        <ElTable
          v-loading="loading"
          height="100%"
          border
          class="sm:h-full"
          :data="data"
          row-key="id"
          @selection-change="checkedRowKeys = $event"
        >
          <ElTableColumn v-for="col in columns" :key="col.prop" v-bind="col" />
        </ElTable>
        <div class="mt-20px flex justify-end">
          <ElPagination
            v-if="mobilePagination.total"
            layout="total,prev,pager,next,sizes"
            v-bind="mobilePagination"
            @current-change="mobilePagination['current-change']"
            @size-change="mobilePagination['size-change']"
          />
        </div>
      </div>
      <RoleOperateDrawer
        v-model:visible="drawerVisible"
        :operate-type="operateType"
        :row-data="editingData"
        @submitted="getDataByPage"
      />
    </ElCard>
  </div>
</template>

<!-- 样式调整 -->
<style lang="scss" scoped>
:deep(.el-card) {
  .ht50 {
    height: calc(100% - 50px); /* 固定卡片内容区高度 */
  }
}
</style>